<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            width: 3000px;
            height: 3000px;
        }        
    </style>
</head>
<body>
    <script>
        /* 
        1.函数节流 : 单位时间内，频繁触发一个事件， 只会触发一次
        每隔一段时间，只执行一次函数。
        2.节流场景 : 解决高频事件 （滚动条事件高频触发）
        3.节流实现:
            3.1 声明一个全局变量存储触发时间   let lastTime = null
            3.2 每一次触发事件，获取当前时间   let currentTime = Date.now()
            3.3 判断 当前时间 与 上一次触发时间，是否超过间隔   currentTime-lastTime>=500
            3.4 如果超过触发间隔，则执行事件处理代码。 然后存储本次触发事件  lastTime = currentTime
        */
        
        //声明一个全局变量存储触发时间
        let lastTime = null

        window.onscroll = function(){
            //1.每一次触发，先获取本次时间戳
            let currentTime = Date.now()
            //2.判断当前时间 与 上一次触发时间 是否超过间隔
            if( currentTime - lastTime >= 500 ){
                console.log( document.documentElement.scrollTop)
                //3.存储本次触发时间
                lastTime = currentTime
            }
            
        }

      
    </script>
</body>
</html>